import { useSafeState } from "ahooks";
import { Button, Steps, Toast, Input, Result } from "antd-mobile";
import React, { FC } from "react";
import { history, useSearchParams } from "umi";
import { SelectAssets } from "./components";
import { ProcessProvider, useProcessContext } from "./context";
import { addWorkflow, AddWorkflowReq } from "@/services";

const { Step } = Steps;

const NewProcess: FC = () => {
  const [step, setStep] = useSafeState(0);
  const { setProcessState, processState } = useProcessContext();
  const [searchParams] = useSearchParams();

  const createProcessHandle = async () => {
    const userId = searchParams.get("userId");
    if (!userId) return;
    const createMenuReq: AddWorkflowReq = {
      title: processState.processName,
      homeId: processState.selectedAssetId, // 房源 ID
      userId: userId, // 用户id，微信用户id
      busionessType: 2, // 业务类型 1-卖房；2-买房
    };
    const res = await addWorkflow(createMenuReq);
    if (res.code == 200) {
      Toast.show({
        icon: "success",
        content: "创建成功！",
      });
      history.back();
      return true;
    }
  };

  return (
    <div className="bg-gray-1 min-h-100vh">
      <div className="sticky top-0 w-full bg-white">
        <Steps
          current={step}
          style={{
            "--title-font-size": "16px",
            "--description-font-size": "15px",
            "--indicator-margin-right": "6px",
          }}
        >
          <Step title="选择房源" />
          <Step title="填写服务标题" />
          <Step title="创建完成" />
        </Steps>
      </div>
      <div>
        {step == 0 && <SelectAssets />}
        {step == 1 && (
          <>
            <div className="w-full bg-white py-2 mt-6px">
              <div className="border-1px border-gray-1 border-solid h-40px flex items-center px-10px rounded m2">
                <Input
                  defaultValue={processState.processName}
                  placeholder="请填写流程名称"
                  onChange={(val) => {
                    setProcessState({
                      ...processState,
                      processName: val,
                    });
                  }}
                ></Input>
              </div>
            </div>
          </>
        )}
        {step == 2 && (
          <>
            <Result
              status="waiting"
              title="等待提交"
              description="服务内容初始化完成，点击提交完成服务流程创建"
            />
          </>
        )}
      </div>
      <div className="w-full h-70px"></div>
      <div className="fixed bottom-0 h-60px w-full bg-white flex justify-around py-2">
        <Button
          className="w-46% h-50px"
          color="primary"
          fill="outline"
          onClick={() => {
            if (step > 0) {
              setStep(step - 1);
            } else {
              history.back();
            }
          }}
        >
          {step > 0 ? "上一步" : "返回"}
        </Button>
        <Button
          className="w-46% h-50px"
          color="primary"
          onClick={() => {
            if (step == 0 && !processState.selectedAssetId) {
              Toast.show({
                icon: "fail",
                content: "请选择房源",
              });
              return;
            }
            if (step == 1 && !processState.processName) {
              Toast.show({
                icon: "fail",
                content: "请填写流程名称",
              });
              return;
            }
            if (step == 2) {
              createProcessHandle();
              return;
            }
            setStep(step + 1);
          }}
        >
          {step < 2 ? "下一步" : "提交"}
        </Button>
      </div>
    </div>
  );
};

export default () => (
  <>
    <ProcessProvider>
      <NewProcess />
    </ProcessProvider>
  </>
);
